// products.js
import api from '../../services/api'

Page({
  data: {
    currentCategory: 'all',
    categories: [
      { value: 'all', label: '全部' }
    ],
    loading: false,
    pageNo: 1,
    pageSize: 10,
    totalPages: 0,
    cases: [],
    sortedCases: [],
    defaultImage: '/images/case_placeholder.png', // 默认图片
    searchKeyword: '', // 搜索关键词
    hasMore: true, // 是否有更多数据
    isHeaderSticky: false, // 头部是否固定
    headerThreshold: 200, // 滚动多少后固定头部
    scrollTop: 0, // 滚动位置
    carBrandName: "全部车型",
    showBackToTop: false, // 是否显示回到顶部按钮
  },
  
  onLoad() {
    this.fetchCategories();
    this.fetchCases();
  },

  onShow() {
    if (this.data.carBrandName && this.data.carBrandName !== '全部车型') {
      this.fetchCases();
    }
  },
  
  // 监听页面滚动
  onScroll(e) {
    const scrollTop = e.detail.scrollTop;
    
    // 当滚动超过阈值时，显示悬浮头部
    if (scrollTop >= this.data.headerThreshold && !this.data.isHeaderSticky) {
      this.setData({ isHeaderSticky: true });
    } 
    // 当滚动小于阈值时，隐藏悬浮头部
    else if (scrollTop < this.data.headerThreshold && this.data.isHeaderSticky) {
      this.setData({ isHeaderSticky: false });
    }

    // 控制回到顶部按钮显示
    const showBackToTop = scrollTop > 500;
    if (this.data.showBackToTop !== showBackToTop) {
      this.setData({ showBackToTop });
    }
  },
  
  // 获取分类标签
  fetchCategories() {
    this.setData({ loading: true });
    
    api.system.dictList('case_label')
      .then(res => {
        console.log('Categories response:', res);
        if (res.status === 200 && res.data) {
          const categoriesFromApi = res.data.map(item => ({
            value: item.dictValue || item.value,
            label: item.dictLabel || item.label || item.name
          }));
          
          // 确保"全部"选项在最前面
          const categories = [{ value: 'all', label: '全部' }, ...categoriesFromApi];
          
          this.setData({
            categories: categories,
            loading: false
          });
        } else {
          wx.showToast({
            title: '获取分类失败',
            icon: 'none'
          });
          this.setData({ loading: false });
        }
      })
      .catch(err => {
        console.error('获取分类失败:', err);
        wx.showToast({
          title: '获取分类失败',
          icon: 'none'
        });
        this.setData({ loading: false });
      });
  },
  
  // 获取案例列表
  fetchCases() {
    this.setData({ loading: true });
    
    const params = {
      pageNo: this.data.pageNo,
      pageSize: this.data.pageSize
    };
    
    // 如果选择了分类，添加到请求参数
    if (this.data.currentCategory !== 'all') {
      params.classification = this.data.currentCategory;
    }
    
    // 如果有搜索关键词，添加到请求参数
    if (this.data.searchKeyword) {
      params.search = this.data.searchKeyword;
    }
    
    // 如果选择了品牌，添加到请求参数
    if (this.data.carBrandName && this.data.carBrandName !== '全部车型') {
      params.vehicleBrand = this.data.carBrandName;
    }

    api.product.getCaseList(params)
      .then(res => {
        console.log('Cases response:', res);
        if (res.status === 200 && res.data) {
          // 处理图片URL
          const cases = res.data || [];
          cases.forEach(item => {
            // 添加标题
            item.title = item.productName || '';
            
            // 处理封面图
            if (item.coverPicture) {
              item.coverImg = item.coverPicture.startsWith('http') ? 
                item.coverPicture : `https://${item.coverPicture}`;
            } else {
              item.coverImg = this.data.defaultImage;
            }
            
            // 处理描述
            item.description = `${item.productSeries || ''} ${item.productName || ''}`;
            
            // 处理评分
            item.rating = item.score || 4.5;
            
            // 使用分类作为标签
            if (item.label) {
              item.tag = item.label.split(',')[0];
            }
            
            // 处理图片列表
            if (item.pictureList) {
              item.pictures = item.pictureList.split('|').map(pic => ({
                url: pic,
                isActive: false
              }));
              
              // 设置第一张图片为活跃状态
              if (item.pictures.length > 0) {
                item.pictures[0].isActive = true;
              }
            } else {
              item.pictures = [];
            }
          });
          
          // 计算是否还有更多数据
          const hasMore = cases.length >= this.data.pageSize;
          
          // 更新UI数据
          this.setData({
            cases: this.data.pageNo === 1 ? cases : [...this.data.cases, ...cases],
            sortedCases: this.data.pageNo === 1 ? cases : [...this.data.cases, ...cases],
            loading: false,
            hasMore: hasMore,
            totalPages: Math.ceil((res.data.total || cases.length) / this.data.pageSize)
          });
        } else {
          wx.showToast({
            title: '获取案例失败',
            icon: 'none'
          });
          this.setData({ loading: false });
        }
      })
      .catch(err => {
        console.error('获取案例失败:', err);
        wx.showToast({
          title: '获取案例失败',
          icon: 'none'
        });
        this.setData({ loading: false });
      });
  },
  
  // 设置分类
  setCategory(e) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      currentCategory: type,
      pageNo: 1 // 重置页码
    });
    
    // 重新获取案例
    this.fetchCases();
  },
  
  // 清除车辆筛选
  clearVehicleFilter() {
    this.setData({
      carBrandName: '全部车型',
      pageNo: 1
    });
    this.fetchCases();
  },
  
  // 重置所有筛选
  resetAllFilters() {
    this.setData({
      currentCategory: 'all',
      searchKeyword: '',
      carBrandName: '全部车型',
      pageNo: 1
    });
    this.fetchCases();
  },
  
  // 点击图片切换主图
  switchMainImage(e) {
    const { caseIndex, imageIndex } = e.currentTarget.dataset;
    
    // 更新当前案例的图片活跃状态
    const cases = [...this.data.sortedCases];
    const currentCase = cases[caseIndex];
    
    // 重置所有图片的活跃状态
    currentCase.pictures.forEach(pic => pic.isActive = false);
    
    // 设置选中的图片为活跃状态
    currentCase.pictures[imageIndex].isActive = true;
    
    // 更新主图
    currentCase.coverImg = currentCase.pictures[imageIndex].url;
    
    this.setData({
      sortedCases: cases
    });
  },
  
  // 搜索确认
  onSearchConfirm() {
    this.setData({
      pageNo: 1 // 重置页码
    });
    this.fetchCases();
  },
  
  // 清除搜索
  clearSearch() {
    this.setData({
      searchKeyword: '',
      pageNo: 1
    });
    this.fetchCases();
  },
  
  // 导航到案例详情
  navigateToCaseDetail(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/products/details/index?id=${id}`
    });
  },
  
  // 加载更多
  onReachBottom() {
    console.log('Reach bottom triggered, hasMore:', this.data.hasMore, 'loading:', this.data.loading);
    if (this.data.hasMore && !this.data.loading) {
      this.setData({
        pageNo: this.data.pageNo + 1
      });
      this.fetchCases();
    }
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.setData({
      pageNo: 1,
      searchKeyword: '',
      hasMore: true
    });
    
    this.fetchCases();
    wx.stopPullDownRefresh();
  },

  // 分享给好友
  onShareAppMessage() {
  },

  // 分享到朋友圈
  onShareTimeline() {
  },

  // 搜索输入处理
  onSearchInput(e) {
    this.setData({
      searchKeyword: e.detail.value,
      pageNo: 1 // 重置页码
    });
    // 输入时就触发搜索
    this.fetchCases();
  },

  // 选择品牌
  chooseCarModel () {
    wx.navigateTo({
      url: '/pages/index/cost/brand-list/index?onlySelectBrand=1',
    });
  },

  // 滚动到顶部
  scrollToTop() {
    this.setData({ scrollTop: 0 });
  },
}) 